<template>
    <div class="block">
        <el-select class="r5" v-model="province_code" style="width:85px;" @change="provinceChange">
            <el-option value="0" label="全部"/>
            <el-option v-for="item in province" :value="item.value" :key="item.value" :label="item.label"/>
        </el-select>
        <el-select class="r5" v-model="city_code" style="width:100px;" v-show="city.length >0" @change="cityChange">
            <el-option value="0" label="全部"/>
            <el-option v-for="item in city" :value="item.value" :key="item.value" :label="item.label"/>
        </el-select>
        <el-select v-model="district_code" style="width:200px;" v-show="district.length >0" @change="callback">
            <el-option value="0" label="全部"/>
            <el-option v-for="item in district" :value="item.value" :key="item.value" :label="item.label"/>
        </el-select>
    </div>
</template>

<script>
    import {area} from "./area";

    export default {
        name: 'AreaSelect',
        data() {
            return {
                province_code: '0',
                city_code: '0',
                district_code: '0',
                province: [],
                city: [],
                district: [],
            }
        }
        , created() {
            area().forEach(item => {
                this.province.push(item);
            })
        }
        , methods: {
            provinceChange(val) {
                this.city_code = '0';
                this.district_code = '0';
                this.district = [];
                if (val == 0) {
                    this.city = [];
                } else {
                    this.city = this.child(this.province, val);
                }
                this.callback();
            }
            , cityChange(val) {
                this.district_code = '0';
                this.district = this.child(this.city, val);
                this.callback();
            }
            , child(array, parent) {
                let len = array.length;
                for (let i = 0; i < len; i++) {
                    if (array[i].value == parent) {
                        return array[i].children
                    }
                }
                return [];
            }
            , callback() {
                this.$emit('change', {
                    province: this.province_code > 0 ? this.province_code : undefined,
                    city: this.city_code > 0 ? this.city_code : undefined,
                    district: this.district_code > 0 ? this.district_code : undefined,
                })
            }
        }
    }
</script>

<style scoped>

</style>
